<script lang="ts" setup>
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  item: {
    type: Object,
    default: {
      id: "",
    },
  },
});

const editHandle = (row: Object) => {
  console.log("编辑", row);
  router.push({ path: "/add", query: { id: row.id } });
};
</script>

<template>
  <a-card hoverable class="ta-card">
    <template #cover>
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    </template>
    <template #actions>
      <setting-outlined key="setting" />
      <edit-outlined key="edit" @click="editHandle(props.item)" />
      <ellipsis-outlined key="ellipsis" />
    </template>
    <a-card-meta
      class="ta-descript"
      :title="item.title"
      :description="item.description"
    >
      <template #avatar>
        <a-avatar src="https://joeschmoe.io/api/v1/random" />
      </template>
    </a-card-meta>
  </a-card>
</template>

<style scoped>
.ta-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 300px;
  height: 560px;
}
.ta-descript {
  height: 300px;
}
</style>
